<template>
  <div class="dashboard">
    <div v-for="item in data" class="item">
      <div class="label">{{ item.key }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';

const data = ref([
  {key: '劳动分配率', value: '38.28%'},
  {key: '人工成本利润率', value: '142.58%'},
  {key: '人事费用率', value: '12.11%'},
  {key: '人工成本占比', value: '16.83%'}
]);
</script>

<style scoped>
.dashboard {
  width: 421px;
  height: 232px;
  padding: 20px;
  background: #FAFCFF;
  border: 1px solid rgba(234, 237, 247, 1);
  border-radius: 8px;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
}

.item .label {
  color: #666;
}

.item .value {
  color: #4285f4;
  font-weight: bold;
}
</style>